﻿<template>
    <elm-page-lr width="300px">
        <template #left>
            <elm-page-tb>
                <elm-rmenu ref="rmenu">
                    <div @click="addFL()" class="item">新增</div>
                    <div @click="editFL()" class="item">编辑</div>
                    <el-divider></el-divider>
                    <div @click="deleteFL()" class="item">删除</div>
                </elm-rmenu>
                <template #top>
                    <el-input placeholder="请查询输入内容" prefix-icon='el-icon-search' size="mini" v-model="filterText" @change="treebinding()" style="width:100%;"></el-input>
                </template>
                <div style="flex: 1 1 auto;display: flex; flex-direction: column; user-select:none;"
                     @contextmenu="openrmenudiv">
                    <elm-table-tree ref="leftData" url="/system/dict/type/GetData"
                                    @row-click="rowClick" @row-contextmenu="openrmenu" :page-size="9999"
                                    :show-index="false" :unshift="{ id: null, dict_name: '全部' }" height="100%">
                        <el-table-column prop="dict_type" label="分类编码"></el-table-column>
                        <el-table-column prop="dict_name" label="分类名称"></el-table-column>
                    </elm-table-tree>
                </div>
            </elm-page-tb>
        </template>
        <elm-page-tb>
            <template #top>
                <el-input placeholder="请查询输入内容" size="mini" prefix-icon='el-icon-search' style="width: 250px;"
                          v-model="postData.dict_label" clearable></el-input>
                <right>
                    <el-button-group>
                        <el-button icon="el-icon-search" size="mini" @click="tablebinding()">查询</el-button>
                        <elm-open-button icon="el-icon-edit" title="新增" url="dict_edit" width="500"
                                         height="400">新增
                        </elm-open-button>
                    </el-button-group>
                </right>
            </template>
            <elm-table url="/system/dict/GetData" :post-data="postData" :show-index="true">
                <el-table-column prop="dict_label" label="字典标签"></el-table-column>
                <el-table-column prop="dict_value" label="字典值"></el-table-column>
                <el-table-column prop="dict_name" label="分类名称"></el-table-column>
                <el-table-column prop="dict_type" label="分类编码"></el-table-column>
                <el-table-column prop="dict_sort" label="字典排序" width="80"></el-table-column>
                <el-table-column prop="status" label="状态" width="80">
                    <template v-slot="scope">
                        <div style="text-align:left;">{{ handleStatus(scope.row.status) }}</div>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="150" align="center">
                    <template v-slot="scope">
                        <elm-open-button url="dict_edit" title="编辑" :data="{ model: scope.row }" width="500"
                                         height="400" type="text">编辑
                        </elm-open-button>
                        <el-button @click="deleteData(scope.row)" type="text" size="mini">删除</el-button>
                    </template>
                </el-table-column>
            </elm-table>
        </elm-page-tb>
    </elm-page-lr>
</template>

<script>
export default {
    extends: elmVueBase,
    data() {
        return {
            filterText: '',
            postData: {dict_label: null, dict_type: null},
            dict_status: [{value: '0', label: '正常'},{value: '1', label: '停用'}],
        }
    },
    created() {
    },
    methods: {
        openrmenudiv(event) {
            this.$refs.rmenu.open(event);
        },
        openrmenu(row, column, event) {
            if (row) {
                if (row.id == null) {
                    event.stopPropagation();
                    event.returnValue = false;
                    return;
                }
                this.$refs.leftData.$children[0].setCurrentRow(row);
                this.rowClick(row);
                this.$refs.leftData.$children[0].CurrentRow = row;
                this.$refs.rmenu.open(event);
            }
        },
        rowClick(data) {
            this.postData.dict_type = data.dict_type;
            this.tablebinding();
        },
        addFL() {
            this.$refs.rmenu.close();
            elm.dialog.open(this, "dict_type_edit", "新增分类", 400, 220);
        },
        editFL() {
            let data = this.$refs.leftData.$children[0].CurrentRow;
            if (data) {
                this.$refs.rmenu.close();
                elm.dialog.open(this, "dict_type_edit", "编辑", 400, 220, {model: data});
            }
        },
        async deleteFL() {
            let data = this.$refs.leftData.$children[0].CurrentRow;
            if (data) {
                this.$refs.rmenu.close();
                await this.delete('/system/dict/type/Delete', {id: data.id})
                this.treebinding();
            }
        },
        async deleteData(data) {
            await this.delete('/system/dict/Delete', {id: data.id})
            this.tablebinding();
        },
        span({row, column, rowIndex, columnIndex}) {
            if (rowIndex == 0) {
                if (columnIndex == 1) {
                    return [0, 0];
                }
                return [1, 2];
            }
        },
        handleStatus(val) {
            const item = this.dict_status.find(item => item.value === val);
            return item ? item.label : '';
        }
    }
}
</script>

<style scoped>
</style>